<script lang="jsx">
// jsx 语法computed, : jsx = js + xml(≈html)，
import { defineComponent, h, resolveComponent, computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { MenuFoldOutlined } from "@ant-design/icons-vue"; //引入图标

export default defineComponent({
  name: "SideBarItem",
  setup() {
    const router = useRouter(); // 获取路由实例

    const openKeys = ref([]); // 默认展开的一级菜单
    const selectedKeys = ref([]); // 选中的二级菜单

    // 监听路由变化，更新选中的菜单
    watch(
      () => router.currentRoute.value,
      (route) => {
        // 设置一级菜单高亮
        openKeys.value = [route?.meta.parent];

        // 设置二级菜单高亮
        selectedKeys.value = [route?.path];
      },
      // 立即执行
      { immediate: true }
    );

    // 获取路由表
    const routes = computed(() => {
      // return router.options.routes;
      // 隐藏 hidden: true 的路由
      // console.log(router.options.routes);
      return router.options.routes.filter((v) => !v.hidden);
    });

    // 渲染侧栏菜单的函数
    const renderSubMenu = () => {
      // 递归渲染侧栏菜单
      function travel(_route, nodes = []) {
        // _route 是一个数组，里面是路由对象
        if (_route) {
          // 遍历路由对象
          _route.forEach((element) => {
            const { icon, title } = element.meta;

            const node =
              element.children && element.children.length > 0 ? (
                // 一级菜单：渲染 标题 和 图标
                <a-sub-menu
                  title={title}
                  key={element.name}
                  icon={h(resolveComponent(icon))}
                >
                  {/* 如果有子路由，递归渲染 */}
                  {travel(element.children)}
                </a-sub-menu>
              ) : (
                // 二级菜单：渲染 路由链接 和 标题
                <a-menu-item key={element.path}>
                  <router-link to={element.path}>{title}</router-link>
                </a-menu-item>
              );
            nodes.push(node);
          });
        }
        return nodes;
      }
      return travel(routes.value);
    };

    // 返回一个函数，函数返回一个jsx（ 不用写 template ）
    return () => (
      <a-menu
        v-model:selectedKeys={selectedKeys.value}
        v-model:openKeys={openKeys.value}
        theme="light"
        mode="inline"
      >
        {renderSubMenu()}
      </a-menu>
    );
  },
});
</script>

<style lang="scss" scoped>
/*  */
</style>
